@layer recipes {
  [data-scope="qr-code"][data-part="frame"] {
    width: 120px;
    height: 120px;
    background-color: var(--colors-bg-subtle);
  }

  [data-scope="qr-code"][data-part="pattern"] {
    fill: black;
    .chakra-ui-dark & {
      fill: white;
    }
  }

  [data-scope="qr-code"][data-part="overlay"] {
    width: 24px;
    height: 24px;
    outline: 4px solid white;

    & img {
      width: 100%;
      height: 100%;
    }

    .chakra-ui-dark & {
      outline-color: black;
    }
  }
}
